<script setup>
  import { Twitter, useColor } from 'vue-color-next'
  import './css/index.css'
  import {ref, reactive, watch} from "vue";
  const emit = defineEmits({
    select:(color)=> typeof color === 'string'
  })
  const color = ref('#000000')
  const visible = ref(false)
  const colorObj = reactive({
    hex: '',
    hex8: '',
    rgb: {},
    rgba: {},
    hsl: {},
    hsla: {},
    hsv: {},
    hsva: {},
  })
  const toggleCompact = () => {
    visible.value = !visible.value
  }
  const { colors } = useColor(color)
  watch(colorObj, (value) => {
    color.value = value.hex
  }, )
  watch(color, (v) => {
    emit('select', v)
    toggleCompact()
  })
</script>

<template>
  <div class="tx-color-container" @mouseleave="visible = false">
    <div class="tx-color-wrap">
      <div class="tx-button" @click="toggleCompact" title="背景颜色">
        <i class="iconfont icon-mianxing_beijingyanse_1"></i>
      </div>
      <div v-if="visible">
        <Twitter
          v-model="colors"
          v-model:rgb="colorObj.rgb"
          v-model:rgba="colorObj.rgba"
          v-model:hsl="colorObj.hsl"
          v-model:hsla="colorObj.hsla"
          v-model:hex="colorObj.hex"
          v-model:hex8="colorObj.hex8"
          v-model:hsv="colorObj.hsv"
          v-model:hsva="colorObj.hsva"
        />
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.tx-color-container {
  display: inline-block;
}
.tx-color-wrap {
  position: relative;
  display: inline-block;
  font-size: 1em;
  font-weight: 500;
  font-family: inherit;
  background-color: #ffffff;
  cursor: pointer;
  transition: background-color 0.25s;
  box-sizing: border-box;
}
:deep(.vc-twitter)  {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 10;
}
:deep(.vc-twitter-triangle),:deep(.vc-twitter-triangle-shadow) {
  display: none;
}
</style>